<template>
    <provideECardView ref="provideECardView" />
    <addStudentView ref="addStudentView" />
    <headerView systemName="一卡通发卡系统" />
    <div class="app-body">
        <div class="app-search">
            <el-form :inline="true" class="demo-form-inline" v-model="form">
                <el-form-item label="学生姓名" style="width:200px">
                    <el-input placeholder="请输入姓名" v-model="form.studentName" clearable></el-input>
                </el-form-item>
                <el-form-item label="饭卡号" style="width:200px">
                    <el-input placeholder="请输入饭卡号" v-model="form.oneCardNumber" clearable></el-input>
                </el-form-item>
                <!-- <el-form-item label="身份证号" style="width:260px">
                    <el-input placeholder="请输入身份证号" v-model="form.idCard" clearable @blur="blurEncrypt"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" @keyup.enter="searchEnter">搜索</el-button>
                    <el-button type="success" @click="provideECard">批量发卡</el-button>
                    <el-button type="warning" @click="addStudent">单个发卡</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table size="small" :data="list" border @cell-click="changeInfo">
            <el-table-column prop="id" label="序号" align="center" />
            <el-table-column prop="studentNumber" label="学号" align="center" />
            <el-table-column prop="studentName" label="姓名" align="center" />
            <el-table-column prop="gradeId" label="年级" align="center" />
            <el-table-column prop="classId" label="班级" align="center" />
            <!-- <el-table-column prop="idCard" label="身份证号" align="center"/> -->
            <el-table-column prop="oneCardNumber" label="饭卡号" align="center" />
            <el-table-column prop="handledName" label="注册人" align="center" />
            <el-table-column prop="handledDate" label="注册日期" align="center" />
            <el-table-column label="操作" align="center">
                <template style="display: block" #default="scope">
                    <el-button size="small" type="danger" v-if="scope.row.haveCard == 1"
                        @click.stop="createCard(scope.row)">发卡
                    </el-button>
                    <el-button size="small" type="danger" v-else @click.stop="createCard(scope.row)">重新发卡
                    </el-button>
                </template>
            </el-table-column>
            <template v-slot:empty>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </el-table>
        <div style="margin-top: 10px">
            <el-config-provider :locale="locale">
                <el-pagination :total="total" :page-size="limit" :current-page="page"
                    layout="total, prev, pager, next, jumper" @size-change="changePageSize"
                    @current-change="changeCurrentPage">
                </el-pagination>
            </el-config-provider>
        </div>
    </div>
    <bottomView></bottomView>
</template>
<script>
import provideECardView from "../../components/eCard/provideECard";
import addStudentView from "../../components/eCard/addStudent";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { decrypt } from "@/utils/dateFormat";
import bottomView from "@/components/bottom.vue";
import headerView from "../../components/header";

export default {
    name: "eCardList",
    data() {
        return {
            title: "",
            page: 1,
            total: 0,
            limit: 12,
            list: [],
            headerTitle: "",
            campus: "",
            year: "",
            idCardNumber: "",
            form: {
                studentName: "",
                oneCardNumber: "",
                idCard: ""
            },
        };
    },
    components: {
        ElConfigProvider,
        ElMessageBox,
        bottomView,
        headerView,
        provideECardView,
        addStudentView,
        ElMessage
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getCardsList();
    },
    methods: {


        provideECard() {
            this.$refs.provideECardView.title = '批量发卡';
            this.$refs.provideECardView.year = this.year;
            this.$refs.provideECardView.classForm.gradeId = this.year + 2;
            this.$refs.provideECardView.dialogFormVisible = true;
            this.$refs.provideECardView.getClassInfoList()
        },
        addStudent() {
            this.$refs.addStudentView.title = '单个发卡';
            this.$refs.addStudentView.year = this.year;
            this.$refs.addStudentView.classForm.gradeId = this.year + 2;
            this.$refs.addStudentView.dialogFormVisible = true;
            this.$refs.addStudentView.getClassInfoList()
        },
        changeInfo(row, column, cell, event) {
            // let property = column.property;
            // let temp = property.split('.');
            // let info = row[temp[0]];
            // // console.log(property, temp, row[temp[0]], temp[0]);
            // if (property != 'courseNumber') {
            //     // this.editClassSubject(temp[0], info['aliasName'], row.courseNumber)
            // }
        },
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.page = 1;
                this.getCardsList();
            }
        },
        editClassSubject(dateName, aliasName, courseNumber) {
            this.$refs.editClassScheduleView.title = '修改课表';
            this.$refs.editClassScheduleView.classScheduleForm.className = this.className;
            this.$refs.editClassScheduleView.classScheduleForm.aliasName = aliasName;
            this.$refs.editClassScheduleView.classScheduleForm.courseNumber = courseNumber;
            this.$refs.editClassScheduleView.classScheduleForm.campus = this.campus;
            this.$refs.editClassScheduleView.classScheduleForm.dateName = dateName;
            this.$refs.editClassScheduleView.classScheduleForm.week = this.weekList[dateName];
            this.$refs.editClassScheduleView.getAliasList();
            this.$refs.editClassScheduleView.dialogFormVisible = true
        },
        async createCard(data) {
            console.log(data);
            this.$refs.addStudentView.title = '单个发卡';
            this.$refs.addStudentView.titleFlag = true;
            this.$refs.addStudentView.year = this.year;
            this.$refs.addStudentView.classForm.gradeId = data.gradeId;
            this.$refs.addStudentView.dialogFormVisible = true;
            this.$refs.addStudentView.getClassInfoList()
            this.$refs.addStudentView.classForm.gradeId = data.gradeId
            this.$refs.addStudentView.classForm.studentName = data.studentName
            this.$refs.addStudentView.classForm.studentNumber = data.studentNumber
            this.$refs.addStudentView.classForm.idCard = await decrypt(data.idCard)
            !data.mobile ? this.$refs.addStudentView.classForm.mobile = "" : data.mobile.length > 11 ? this.$refs.addStudentView.classForm.mobile = await decrypt(data.mobile) : this.$refs.addStudentView.classForm.mobile = data.mobile
            this.$refs.addStudentView.classForm.classId = data.classId


            // let list = new FormData();
            // list.append('studentNumber', studentNumber);
            // httpService("/pythonApi/eCardApi/insertSingleCard",
            //     list, "post").then(
            //         (data) => {
            //             console.log(data);
            //             if (data.code == 200) {
            //                 ElMessage.success(data.message);
            //                 this.getCardsList();
            //             } else {
            //                 ElMessage.error(data.message);
            //             }
            //         }
            //     );
        },


        reloadData() {
            this.page = 1;
            this.getCardsList()
        },
        onSubmit() {
            this.page = 1;
            this.getCardsList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getCardsList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getCardsList();
        },
        getCardsList() {
            httpService(
                "/pythonApi/eCardApi/getCardsList",
                {
                    page: this.page,
                    limit: this.limit,
                    studentName: this.form.studentName,
                    oneCardNumber: this.form.oneCardNumber,
                    // idCard: this.form.idCard
                    // idCard: this.idCardNumber
                },
                "get"
            ).then((data) => {
                this.list = data.data;
                this.total = data.total;
                this.year = data.year;
                this.headerTitle = data.className + '课表';
                this.className = data.className;
                this.campus = data.campus

            });
        }
    },
};
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 10px;
    width: calc(100vw - 220px);
}

.app-search {}


.app-body {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 204px);
}
</style>
